<template>
  <el-container class="bg">
    <el-main id="outbox">
      <el-container id="box">
        <el-aside id="left" width="40%">
        </el-aside>
        <el-container>
          <el-main class="main_tab" id="main">
            <h4>注册</h4>
            <!-- 选项卡 -->
            <!-- 表1注册 -->
            <form class="form" id="form_1" v-bind:style="{display:form_1}">
              <div class="submail">
                <div class="input">
                <el-input class="acc" type="email" v-bind:placeholder="typeString" v-model="form.userPass" @blur="checkUserPass"/>
                <el-input class="acc" type="text" placeholder="验证码" v-model="form.code"/>
                </div>
                </div>
              <el-button @click="change" id="changeBtn" round size="medium">切换登录方式</el-button>
            </form>

            <!-- 表2认证-->
            <form class="form" id="form_2" v-bind:style="{display:form_2}">
              <div class="input">
              <el-input class="acc" type="text" placeholder="姓名" v-model="form.name"/>
              <el-input class="acc" type="text" placeholder="身份证" v-model="form.id"/>
              </div>
            </form>

            <form class="form" id="form_3" v-bind:style="{display:form_3}">
              <div class="input">
              <el-input class="acc" type="text" placeholder="学号" v-model="form.stdId" />
              <el-input class="acc" type="text" placeholder="密码" v-model="form.password" @blur="checkPassWord" show-password></el-input>
              <el-input class="acc" type="text" placeholder="确认密码" v-model="cPassWord" @blur="checkcPassWord" show-password></el-input>
              </div>
            </form>

            <form class="form" id="form_4" v-bind:style="{display:form_4}">
            </form>
            <!-- 选项卡结束 -->
          </el-main>

          <el-footer id="foot" height="170px">
            <!-- 进度条点击 -->
            <el-button style="margin-top: 12px;" @click="next" class="submit" v-bind:loading="isLoading" autofocus=true>
              {{ text }}
            </el-button>
            <el-steps :active="active" finish-status="success" align-center=true>
              <el-step title="邮箱/手机验证"></el-step>
              <el-step title="身份认证"></el-step>
              <el-step title="确认密码"></el-step>
            </el-steps>
            <div class="return">
              <!-- 进度条点击结束 -->
              <router-link to="/" >注册账号</router-link>
            </div>
          </el-footer>

        </el-container>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import {form, post} from "../common/serviceUtil";

export default {
  name: "log",
  data() {
    return {
      ok:false,
      pw1_c:false,
      pw2_c:false,
      state:1 ,
      init_text : "请填写注册信息",
      text:"请填写注册信息",
      isLoading:false,
      activeName: 'first',
      active: 0,
      cPassWord: "123456789",
      typeString:"电话",
      form_1:"",
      form_2:"none",
      form_3:"none",
      form_4:"none",
      form:{
        userPass:"",
        kind:true,
        code:"",
        name:"",
        id:"",
        password:"123456789",
        stdId:"1914080902508",
      }
    };
  },

  methods: {

    tranform(){
      if (this.active++ > 2){
        this.active = 0;
        this.state = 1 ;
        this.text = this.init_text ;
      }
      if(this.active==0){
        this.form_1 = "";
        this.form_2 = "none";
        this.form_3 = "none";
      }else if(this.active==1){
        this.form_1 = "none";
        this.form_2 = "";
        this.form_3 = "none";
      }else if(this.active==2){
        this.form_1 = "none";
        this.form_2 = "none";
        this.form_3 = "";
      }
    },

    next() {
      if(this.state===1){
          this.open({
            title:"请输入注册信息",
            msg:""
          })
      }else if(this.state===2){
          this.getCode()
      }else if(this.state===3){
          this.checkCode()
      }else if(this.state===4){
          this.identify()
      }else if(this.state===6){
          this.register()
      }

    },

    open(values) {
      this.$notify({
        title: values.title,
        message: values.msg,
        type: values.type,
        duration:values.time
      });
    },

    checkUserPass(){
      let ok ;
      let phone = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/ ;
      let email = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      let vue = this
      if(this.form.kind===true){
        ok = phone.test(this.form.userPass)
      }else {
        ok = email.test(this.form.userPass);
      }
      this.ok = ok ;
      if(ok){

        post("checkUserPass",this.form).then(function (respone){
          if(respone.data.status===1){
             vue.text = "发送验证码"
             vue.state = 2 ;
            vue.open({
              time:3000,
              msg: vue.form.kind==true ? "手机号":"邮箱" + "可用",
              type:"success"
            })
          }else{
            vue.open({
              time:3000,
              msg: (vue.form.kind==true ? "手机号":"邮箱" )+ "已经被注册过",
              type:"error"
            })
          }
        })
      }else{
        vue.open({
          time:3000,
          msg: (vue.form.kind==true ? "手机号":"邮箱") + "有误",
          type:"error"
        })
      }
    },

    getCode(){
      var vue = this
      // vue.isLoading=true
      // vue.state = 3
      // vue.isLoading = false ;
      vue.isLoading=true
      vue.text = "确认"
      post("/getCode",this.form).then(function (res){
        if(res.data.status === 1){
          vue.isLoading = false
          vue.state = 3
          vue.text = "确认"
          vue.open({
            title:"成功",
            type:"success",
            time:4000,
            msg:"发送成功"
          })
        }
      }).catch(reason => {
        vue.isLoading = false
      })
    },

    checkCode(){
      let vue = this
      post("/checkCode",this.form).then(function (res){
        if(res.data.status===1){
          vue.state = 4
          let m
          if(vue.kind==true){
            m = "手机号码：";
          }else{
            m = "邮箱："
          }
          vue.open({
            msg:m+vue.form.userPass,
            type:"success",
            time:30000
          })
          vue.tranform()
        }
      })
    },

    identify(){
      // this.tranform()
      // this.state = 6 ;
      // this.text = this.init_text ;
      let vue = this
      vue.isLoading = true
      post("/id",this.form).then(function (res) {
        vue.isLoading=false ;
        vue.tranform()
        vue.state = 5 ;
        vue.text = this.init_text ;
        if(res.data.status===1){
          vue.open({
            title:"姓名:"+vue.form.name,
            type:"success",
            time:10000,
            msg:"ID:"+vue.form.id
          })
        } else{
          vue.open({
            title:"身份证与姓名不对应",
            type:"error",
            time:1000,
          })
        }
      })
    },

    checkPassWord(){
      if(this.form.password.length>7){
        this.pw1_c = true ;
      }else{
        this.open({
          title:"密码长度要大于7",
          type:"error",
          time:5000
        })
      }
    },

    checkcPassWord(){
      // this.state = 7
      // this.text = "提交";
      if(this.cPassWord===this.form.password){
        this.pw2_c = true ;
      }
      if(this.pw1_c&&this.pw2_c){
        this.state = 6
        this.text = "提交";
      }else{
        this.open({
          title:"两次密码输入不同",
          type:"error",
          time:5000
        })
      }
    },

    register(){
      let vue = this
      post("/register",this.form).then(res=>{
        if(res.data.status===1){
          //注册成功
          vue.$router.push({path:"/"})
          vue.open({
            title:"注册成功",
            msg:"为你跳转登录页面",
            type:"success",
            time:3000
          })
        }
      })
    },

    change(){
      if(this.form.kind){
        this.form.kind = false ;
        this.typeString = "邮件" ;
      }else{
        this.form.kind = true ;
        this.typeString = "电话" ;
      }
    },return(){
      input: ''
    }

  }
}
</script>

<style scoped>

  #changeBtn{
    margin-top: 10%;
  }

  #outbox{
    margin-top: 5%;
    height: 700px;
    min-width: 70rem;
  }
  #box{
    background-color: rgba(255, 255, 255, 0.7);
    width:50%;
    margin-left:auto;
    margin-right: auto;
    min-width: 60rem;
    max-width: 68rem;
    height:100%;
    border-radius: 1.5rem;
  }
  #left{
    width: 38%;
    background-image: url("/static/img/4.jpg");
    border-radius: 1.5rem 0 0 1.5rem;
  }
  h4{
    font-size: 1.8rem;
    color: rgb(238, 38, 99);
  }

  .form{

  }

  .input>>>.el-input{
    width: 60%;
    font-size: 1.2rem;
    margin-top: 2.5rem;
    margin-left: 1rem;
    padding: 1rem 0 0 1.6rem;
    border: 0;

    /*border-bottom: 1px solid rgb(28, 16, 17);*/
  }
  .input>>>.el-input__inner{
    border: 0;
    border-bottom: 1px solid rgb(28, 16, 17);
    border-radius: 0;
    color: black;
    background-color: rgba(0, 0, 0, 0);
  }

  /*表单内字体设置*/
  /*.form  /deep/ .el-input__inner{

    width: 60%;
    height: 3.2rem;
    font-size: 1.2rem;
    margin-top: 2.5rem;
    margin-left: 1rem;
    padding: 1rem 0 0 1.6rem;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgb(28, 16, 17);
    color: rgb(17, 8, 12);
    background-color: rgba(0, 0, 0, 0);
  }*/

/*提交按钮样式*/
.submit{
    width: 50%;
    height: 3rem;
    color: #f6f6f6;
    background-image: linear-gradient(120deg, #fa384a 0%, #f8f01e 100%);
    font-size: 1.2rem;
    border: none;
    border-radius: 1rem;
    margin: 3rem 0 0 50%;
    transform: translateX(-50%);
    margin-bottom: 1rem;
  }
.submit:hover {
    box-shadow: 0 0 2rem -0.5rem rgb(0 0 0/15%);
  }

/*底部返回按钮*/
  .return a{
    font-size: 1.3rem;
    text-decoration: none;
    padding: 1rem 2rem;
    color: #666;
  }
  .return a:hover{
    color: rgb(201, 183, 81);
  }

/*滚轮样式*/
  .main_tab{
    overflow: hidden;
    overflow-x: hidden;
  }
  .main_tab::-webkit-scrollbar{
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .main_tab::-webkit-scrollbar-thumb{
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgb(144, 129, 241);
    background: rgb(173, 162, 241);
  }

  .check{
    margin-left: 2rem;
    width: 8rem;
    height: 2rem;
    color: #f6f6f6;
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    font-size: 1.2rem;
    border-radius: 1rem;
    border: none;
  }

</style>
